

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>光路拓扑</title>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=GB2312">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'module.css')}" type="text/css">
    <g:javascript src="jquery.js"/>
    <g:javascript src="jquery.tools.min.js"/>
    <g:javascript src="jquery.autocomplete.js"/>
    <g:javascript src="main-ter.js"/>
    <g:javascript src="common.js"/>
</head>
<body>
<div id="main">

    <div id="map_container" <g:if test="${params.t == 'wv'}">style="width: 350px;" </g:if> ></div>
    <div id="area_list"  ></div>
</div>



</body>
</html>
<script type="text/javascript">

    var boxs =
    {
        "strokeWeight":2,
        "strokeOpacity":0.5,
        "strokeColor":"red",
        "Boxs":${routes}
    }

    var map, opts, content;
    $(function(){
        if($.trim($("#businessdistrict_list").html()) == ""){
            $("#businessdistrict_list").hide();
        }
        var cityAreaCode = "";
        if(cityAreaCode != ""){
            $("#all_area").attr("class", "");
            $("#cityarea_list").children().each(function(){
                if($(this).attr("code") == cityAreaCode){
                    $(this).attr("class", "mouse_on");
                }
            });
        }
        else{
            $("#all_area").attr("href", "javascript:void(0);");
            $("#all_area").css("cursor","default");
            $("#all_area").attr("href", "javascript:void(0);");
            $("#all_area").css("cursor","default");
        }
        var businessDistrictCode = "";
        if(businessDistrictCode != ""){
            $("#businessdistrict_list").children().each(function(){
                if($(this).attr("code") == businessDistrictCode){
                    $(this).attr("class", "mouse_on");
                    $(this).attr("href", "javascript:void(0);");
                    $(this).css("cursor", "default");
                }
            });
        }


        var num = boxs.Boxs.length;
        for (var i = 0; i < num; i++) {
            loadAreaList(boxs.Boxs[i].PortID,boxs.Boxs[i].PortCode, boxs.Boxs[i].PortCaption,boxs.Boxs[i].BoxID,boxs.Boxs[i].BoxCode,boxs.Boxs[i].BoxCaption, boxs.Boxs[i].Address,boxs.Boxs[i].Current,boxs.Boxs[i].GPS.X, boxs.Boxs[i].GPS.Y);
        }

        loadMap();
        openMapInfoWindow();
        $('.scroll-pane').jScrollPane();
        setInterval(function(){$('.scroll-pane2').jScrollPane();}, 10);
    });

    function loadAreaList(portid, portcode,portcaption,boxid,boxcode,boxcaption,address,current,gps_x,gps_y){
        if(current==1)
            $("#area_list").append('<a title="'+boxcaption+'('+boxcode+')" address="'+address+'" portid="'+portid+'" portcode="'+portcode+'" portcaption="'+portcaption+'" boxid="'+boxid+'" boxcode="'+boxcode+'" boxcaption="'+boxcaption+'" current="'+current+'" x="' + gps_x + '" y="' + gps_y + '" class="map_dl01 fix" href="#"><h5>'+boxcaption+'('+boxcode+')</h5><p>端子:'+portcaption+'('+portcode+')<br>地址:'+address+'</p></a>');
        else
            $("#area_list").append('<a title="'+boxcaption+'('+boxcode+')" address="'+address+'" portid="'+portid+'" portcode="'+portcode+'" portcaption="'+portcaption+'" boxid="'+boxid+'" boxcode="'+boxcode+'" boxcaption="'+boxcaption+'" current="'+current+'" x="' + gps_x + '" y="' + gps_y + '" class="map_dl02 fix" href="#"><h5>'+boxcaption+'('+boxcode+')</h5><p>端子:'+portcaption+'('+portcode+')<br>地址:'+address+'</p></a>');

    }

    function openMapInfoWindow(){
        $("#area_list a").mouseenter(function() {
            if($(this).attr("x")!="" && $(this).attr("y")!=""){
                content = getInfoContent($(this).attr("title"), $(this).attr("portid"), $(this).attr("portcode"), $(this).attr("portcaption"), $(this).attr("boxid"), $(this).attr("boxcode"), $(this).attr("boxcaption"), $(this).attr("address"), $(this).attr("current"));
                map.openInfoWindow(new BMap.InfoWindow(content, opts), new BMap.Point($(this).attr("x"), $(this).attr("y")));
            }
        });
    }

    function getInfoContent(title,portid,portcode,portcaption,boxid,boxcode,boxcaption,address,current){
        if(current==1)
            return '<div class="map_tcc01" style="border:0px; height:135px"><div class="scroll-pane2"><h5>'+title+'</h5><p class="map_p1"><span>设备名称：</span>'+boxcaption+'</p><p class="map_p1"><span>设备编码：</span>'+boxcode+'</p><p class="map_p1"><span>端子名称：</span>'+portcaption+'</p><p class="map_p1"><span>端子编码：</span>'+portcode+'</p><p class="map_p1"><span>地址：</span>'+address+'</p></div></div>';
        else
            return '<div class="map_tcc02" style="border:0px; height:135px"><div class="scroll-pane2"><h5>'+title+'</h5><p class="map_p1"><span>设备名称：</span>'+boxcaption+'</p><p class="map_p1"><span>设备编码：</span>'+boxcode+'</p><p class="map_p1"><span>端子名称：</span>'+portcaption+'</p><p class="map_p1"><span>端子编码：</span>'+portcode+'</p><p class="map_p1"><span>地址：</span>'+address+'</p></div></div>';
    }

    function loadMap() {
        var script = document.createElement("script");
        script.src = "http://api.map.baidu.com/api?v=1.3&callback=initializeMap";
        document.body.appendChild(script);
    }
    function initializeMap(){
        var x = "116.318615", y = "39.986812";
        map = new BMap.Map("map_container");
        map.centerAndZoom(new BMap.Point(x, y), 5);
        map.enableScrollWheelZoom();
        map.enableKeyboard();
        map.addControl(new BMap.NavigationControl());
        map.addControl(new BMap.ScaleControl());
        map.addControl(new BMap.OverviewMapControl());


        map.enableDragging();
        map.enablePinchToZoom();

        //map.addControl(new BMap.MapTypeControl());
        var icon1 = new BMap.Icon("../images/marker1.gif", new BMap.Size(23, 25));
        var icon2 = new BMap.Icon("../images/marker2.gif", new BMap.Size(23, 25));
        var point, marker, infoWindow, j=0;
        opts = { offset: new BMap.Size(0, -10) };
        var points = new Array();
        for (var i = 0; i < boxs.Boxs.length; i++) {
            if (boxs.Boxs[i].GPS.X != "" && boxs.Boxs[i].GPS.Y != "") {
                point = new BMap.Point(boxs.Boxs[i].GPS.X,boxs.Boxs[i].GPS.Y);
                points[j] = point;
                j++;
                content = getInfoContent(boxs.Boxs[i].BoxCaption+'('+boxs.Boxs[i].BoxCode+')',boxs.Boxs[i].PortID,boxs.Boxs[i].PortCode, boxs.Boxs[i].PortCaption, boxs.Boxs[i].BoxID, boxs.Boxs[i].BoxCode,boxs.Boxs[i].BoxCaption,boxs.Boxs[i].Address,boxs.Boxs[i].Current);
                addMarker(content,boxs.Boxs[i].Current);
            }
        }
        map.setViewport(points);

        function addMarker(content,current) {
            if(current==1)
                marker = new BMap.Marker(point, { icon: icon1 });
            else
                marker = new BMap.Marker(point, { icon: icon2 });
            map.addOverlay(marker);
            marker.addEventListener("click", function() {
                infoWindow = new BMap.InfoWindow(content, opts);
                this.openInfoWindow(infoWindow);
            });
        }

        var lastx="";
        var lasty="";
        for(var i=0;i<boxs.Boxs.length;i++)
        {

            var box=boxs.Boxs[i];;
            var gps_x=box.GPS.X;
            var gps_y=box.GPS.Y;

            if(lastx!=""&&lasty!="")
            {
                var polyline= new BMap.Polyline([
                    new BMap.Point(lastx, lasty),
                    new BMap.Point(gps_x,gps_y)
                ],
                        {strokeColor:boxs.strokeColor, strokeWeight:boxs.strokeWeight, strokeOpacity:boxs.strokeOpacity}
                );
                map.addOverlay(polyline);
            }
            else
            {
                map.panTo(new BMap.Point(gps_x,gps_y));
            }

            lastx=gps_x;
            lasty=gps_y;
        }
    }
</script>